<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
      /**
       * 快速创建矩形
       * rect(x, y, width, height): 快速绘制矩形
       * x: 矩形左上角的 x 坐标
       * y: 矩形左上角的 y 坐标
       * width: 矩形的宽度
       * height: 矩形的高度
       * 注意： rect方法只是规划了矩形的路径并没有填充和描边，需要使用fill和stroke方法来填充和描边
       * clearRect(x, y, width, height): 清除矩形区域
      */
      const myCanvas = document.getElementById("myCanvas");
      const ctx = myCanvas.getContext("2d");
      ctx.rect(0,0,100,100)
      ctx.fillStyle = 'pink'
      ctx.fill()
      ctx.clearRect(20,20,60,60)
    </script>
  </body>
</html>